<template>
  <div class="layout-page bg-#fff">
    <div class="search-container mb-20px text-center py-15px bg-#f5f6f7">
      <el-input
          v-model="params.keyword"
          class="w-60% h-38px search"
          placeholder="请输入关键字查询"
      />
      <el-button type="primary" class="h-38px b-rd-lt-0 b-rd-lb-0">查询</el-button>
    </div>
    <two-column-layout class="layout-page-inner w-95%">
      <template #left>
        <div class="left-filter">
          <h4 class="font-size-24px lh-40px mb-28px fw-500">数据集(点击查看分类)</h4>
          <div v-for="(item, index) in tagFilterList" :key="item.name" class="filter-tag mb-28px">
            <h5 class="fw-500 font-size-18px mb-14px" @click="toggleTag(index)">
              {{ item.label }}
            </h5>
            <div class="flex flex-wrap mb--6px" v-show="tagVisibility[index]">
              <div
                  class="filter-tag bg-#f8f9fa b-rd-4px px-10px cursor-pointer h-28px lh-28px text-center font-size-14px mr-6px mb-6px"
                  v-for="tag in item.options"
                  :key="tag.value"
                  :class="{
                  'is-active': params[item.name] === tag.value,
                }"
                  @click="tagClick(item.name, tag.value)"
              >
                {{ tag.label }}
              </div>
            </div>
          </div>
        </div>
      </template>
      <template #right>
        <div class="right-list" v-loading="loading">
          <div class="flex justify-between items-center mb-6px">
            <el-checkbox
                v-model="params.recommendStatus"
                :true-value="1"
                :false-value="0"
            >仅显示平台推荐</el-checkbox>
            <el-dropdown
                v-if="false"
                trigger="click"
                @command="handleDropdownClick"
                popper-class="popper-has-active"
            >
              <span class="flex items-center cursor-pointer">
                排序
                <el-icon class="ml-5px">
                  <CaretBottom />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item
                      v-for="item in sortList"
                      :key="item.value"
                      :command="item.value"
                  >
                    <span
                        :class="{ 'is-active': item.value === params.sort }"
                    >{{ item.label }}</span>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
          <div class="card-content">
            <div class="card-wrapper flex flex-wrap justify-between">
              <Card
                  v-for="item in list"
                  :key="item.id"
                  :data="item"
                  @click="goDetail(item.id)"
              />
            </div>
            <el-pagination
                v-show="list.length"
                class="justify-center"
                style="padding: 20px"
                :total="total"
                layout="total, sizes, prev, pager, next"
                v-model:current-page="page.pageNum"
                v-model:page-size="page.pageSize"
                :page-sizes="[10, 20, 50, 100]"
            ></el-pagination>
            <Empty v-if="!list.length" />
          </div>
        </div>
      </template>
    </two-column-layout>
  </div>
</template>

<script setup>
import { CaretBottom } from "@element-plus/icons-vue";
import { usePage, useLoading, useDict } from "@/hooks";
import { DICT_MAP } from "@/const";
import Card from "./components/Card.vue";
import { ref, watch, inject } from "vue";

const params = ref({
  status: 1,
  elementShareType: 1,
  elementType: 1,
  keyword: "",
  elementTag: "",
  elementDomain: "",
  recommendStatus: 0,
  // sort: "default",
});

const { list: tagOptions } = useDict(DICT_MAP.element_tag);
const { list: domainOptions } = useDict(DICT_MAP.element_domain);

const tagFilterList = ref([
  {
    label: "标签",
    name: "elementTag",
    options: tagOptions,
  },
  {
    label: "研究方向/应用领域",
    name: "elementDomain",
    options: domainOptions,
  },
]);

const tagVisibility = ref(tagFilterList.value.map(() => false));

const toggleTag = (index) => {
  tagVisibility.value[index] = !tagVisibility.value[index];
};

const tagClick = (typeName, value) => {
  if (params.value[typeName] === value) {
    params.value[typeName] = "";
  } else {
    params.value[typeName] = value;
  }
};

const sortList = [
  {label: "默认排序", value: "default"},
  {label: "最新创建", value: "created"},
  {label: "最近更新", value: "updated"},
  {label: "下载次数", value: "download"},
  {label: "收藏数量", value: "collected"},
  {label: "最多引用", value: "imported"},
];

const handleDropdownClick = (command) => {
  params.value.sort = command;
};

const {page, total, resetPage} = usePage(10);
const {loading, setLoading} = useLoading();
const list = ref([]);

const $api = inject("$api");
const queryList = async () => {
  setLoading(true);
  try {
    const {data, total: resTotal} = await $api.provide.getCustomerList({
      ...page.value,
      ...params.value,
      recommendStatus: params.value.recommendStatus || null,
    });

    list.value = data;
    total.value = resTotal;
  } finally {
    setLoading(false);
  }
};

watch(
    () => params.value,
    () => {
      resetPage();
    },
    {
      deep: true,
    }
);

watch(
    () => page.value,
    () => {
      queryList();
    },
    {
      deep: true,
      immediate: true,
    }
);

const router = useRouter();
const goDetail = (id) => {
  router.push({
    name: "ModelDetail",
    query: {
      id,
      type: "dataSource",
    },
  });
};
</script>

<style scoped lang="less">
.search-container {
  border-bottom: 1px solid rgba(34, 36, 38, 0.15);
}

.search ::v-deep(.el-input__wrapper) {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.filter-tag.is-active {
  background: @main-color;
  color: #fff;
}

.inner-empty {
  background: rgba(245, 245, 246, 0.5);
  line-height: 300px;
  text-align: center;
  font-size: 20px;
  color: #999;
}
</style>
